import { reqGetUserDetailById, reqGetUserInfo, reqLogin } from '@/api/user'
import { resetRouter } from '@/router'
import { getToken, setToken, removeToken } from '@/utils/auth'

export default {
  namespaced: true,
  state() {
    return {
      // 初始化token, 优先从本地获取
      token: getToken() || '',
      userInfo: {}
    }
  },
  mutations: {
    // 设置token时, 将数据往本地存储一份
    setToken(state, newToken) {
      state.token = newToken
      setToken(newToken)
    },
    removeToken(state) {
      state.token = '' // 将vuex的token移除
      removeToken() // 将本地的token移除
    },
    setUserInfo(state, newInfo) {
      state.userInfo = newInfo
    },
    removeUserInfo(state) {
      state.userInfo = {}
    }
  },
  actions: {
    // 所有的async函数, 底层其实可以理解为都进行了promise包装处理
    // 就可以进行 await 等待
    async login(ctx, payload) {
      // 1. 发送请求, 获取token
      const res = await reqLogin(payload)
      // 2. 调用mutation, 存入vuex
      ctx.commit('setToken', res.data)
    },

    // 其实一个async函数内, 还可以有多个await
    async getUserInfo(ctx) {
      // 发送请求, 获取结果, 将结果存入了vuex
      // 这里只获取了一半的个人信息, 还有一半需要请求另外一个接口
      // 将两个接口的结果进行合并, 存入vuex, 返回给导航守卫处
      const { data: data1 } = await reqGetUserInfo()
      const { data: data2 } = await reqGetUserDetailById(data1.userId)

      const obj = {
        ...data1,
        ...data2
      }
      ctx.commit('setUserInfo', obj)
      return obj
    },

    // action中同样可以将多个action整合(组合调配)
    // 页面中直接调用一个action即可
    logout(ctx) {
      ctx.commit('removeToken')
      ctx.commit('removeUserInfo')

      // 清除重置路由
      resetRouter()

      // user模块，要重置permission模块的路由
      ctx.commit('permission/setRoutes', [], { root: true })
    }

    // getUserInfo(ctx) {
    //   return new Promise((resolve, reject) => {
    //     // 提供了一个异步操作, 异步结束, 将res.data commit 提交到vuex中
    //     reqGetUserInfo().then(res => {
    //       ctx.commit('setUserInfo', res.data)
    //       // 将外层的promise, 状态改成fulfilled
    //       // 并且记录结果 res.data
    //       resolve(res.data)
    //     })
    //   })
    // }
    // 所以将来才能 const info = await store.dispatch('user/getUserInfo')
  },
  getters: {}
}

// const fn = () => {
//   console.log(456)
// }
// const obj = {
//   fn() {
//     fn() // 456
//     console.log(123) // 123
//   }
// }
// obj.fn()
